<template>
  <div class="welcome-container">
    <h1>欢迎使用XX管理系统</h1>
    <div class="dashboard">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" class="dashboard-card">
            <div class="card-content">
              <div class="card-icon blue">
                <i class="el-icon-user"></i>
              </div>
              <div class="card-info">
                <div class="card-title">用户总数</div>
                <div class="card-value">128</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="dashboard-card">
            <div class="card-content">
              <div class="card-icon green">
                <i class="el-icon-s-check"></i>
              </div>
              <div class="card-info">
                <div class="card-title">在线用户</div>
                <div class="card-value">26</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="dashboard-card">
            <div class="card-content">
              <div class="card-icon orange">
                <i class="el-icon-s-data"></i>
              </div>
              <div class="card-info">
                <div class="card-title">系统消息</div>
                <div class="card-value">12</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="dashboard-card">
            <div class="card-content">
              <div class="card-icon purple">
                <i class="el-icon-s-opportunity"></i>
              </div>
              <div class="card-info">
                <div class="card-title">待办事项</div>
                <div class="card-value">5</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-card class="welcome-info" shadow="hover">
        <div slot="header" class="clearfix">
          <span>系统信息</span>
        </div>
        <div class="info-item">
          <span class="label">系统版本：</span>
          <span class="value">v1.0.0</span>
        </div>
        <div class="info-item">
          <span class="label">上次登录时间：</span>
          <span class="value">2023-05-20 08:30:45</span>
        </div>
        <div class="info-item">
          <span class="label">上次登录IP：</span>
          <span class="value">192.168.1.100</span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Welcome',
  data() {
    return {
      // 这里可以添加数据
    };
  }
};
</script>

<style scoped>
.welcome-container {
  padding: 20px;
  text-align: left;
}

h1 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 30px;
}

.dashboard {
  margin-top: 20px;
}

.dashboard-card {
  height: 108px;
  margin-bottom: 20px;
}

.card-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
}

.card-icon i {
  font-size: 30px;
  color: #fff;
}

.blue {
  background-color: #409EFF;
}

.green {
  background-color: #67C23A;
}

.orange {
  background-color: #E6A23C;
}

.purple {
  background-color: #8e44ad;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.welcome-info {
  margin-top: 20px;
}

.info-item {
  line-height: 2;
  display: flex;
}

.label {
  color: #606266;
  width: 150px;
}

.value {
  color: #303133;
  flex: 1;
}
</style>